<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage和SessionStorage</title>
    <script>
        function addLocalStorage(){
            localStorage.setItem("张三","12324234234");
        }
        function editLocalStorage(){
            localStorage.setItem("张三","666666");
        }
        function getLocalStorage(){
            var value = localStorage.getItem("张三");
            alert(value);
        }
        function removeLocalStorage(){
            localStorage.removeItem("张三");
        }





        function addSessionStorage(){
            sessionStorage.setItem("张三","12324234234");
        }
        function editSessionStorage(){
            sessionStorage.setItem("张三","666666");
        }
        function getSessionStorage(){
            var value = sessionStorage.getItem("张三");
            alert(value);
        }
        function removeSessionStorage(){
            sessionStorage.removeItem("张三");
        }

        // 相同点:  它们都是把数据存储到浏览器本地
        // LocalStorage和SessionStorage区别:
                       
        //                 1.SessionStorage只能在一个窗口共享数据,多窗口是不能共享数据,
        //                 而LocalStorage它只要不手动删除数据,会一直共享
        
    </script>
    
</head>
<body>
    <button onclick="addLocalStorage()">localStorage的新增</button><br/>
    <button onclick="editLocalStorage()">localStorage的修改</button><br/>
    <button onclick="getLocalStorage()">localStorage查询</button><br/>
    <button onclick="removeLocalStorage()">localStorage删除</button><br/>
    <hr>

    <button onclick="addSessionStorage()">sessionStorage的新增</button><br/>
    <button onclick="editSessionStorage()">sessionStorage的修改</button><br/>
    <button onclick="getSessionStorage()">sessionStorage查询</button><br/>
    <button onclick="removeSessionStorage()">sessionStorage删除</button><br/>
</body>
</html>